import { Row, Col,Collapse } from 'antd';
import React, {useState, useEffect} from 'react'
import type {UploadFile} from 'antd/es/upload/interface'
import cardStyles from '../../index.less';
import styles from './index.less'
import {getPublicDownloadUrl} from '@/service/common/upload'

const {Panel} = Collapse

function Contract(props:any) {
  const { info } = props;
  const [fileList, setFileList] = useState<UploadFile[]>([])
  const customizeHeader = (value: string) => (
    <div>
      <div className={styles.tip} />
      {value}
    </div>
  )
  useEffect(()=>{
    if(info?.contract?.attachmentList){
      getPublicDownloadUrl(info?.contract?.attachmentList).then((res:any)=>{  
        setFileList(res?.data)
      })
    }
   
  },[info])
  return (
    <div className={cardStyles.card} id='contract'>
       <Collapse
          defaultActiveKey={['1', '2']}
          ghost
          expandIconPosition="end">
             <Panel header={customizeHeader('合同信息')} key="1">
                <Row gutter={24} className={cardStyles.rows}>
                  <Col span={12} className={cardStyles.col}>
                    <div className={cardStyles.label}>备注：</div>
                    <div className={cardStyles.value}>{info?.contract?.remark}</div>
                  </Col>
                </Row>
                <Row gutter={24} className={cardStyles.rows}>
                  <Col span={12} className={cardStyles.col}>
                    <div className={cardStyles.label}>合同附件：</div>
                    <div className={cardStyles.value}>
                    {fileList?.map((res:any)=>(
                        <a href={res.url} download={res?.filename} target='blank'>{res.filename}</a>
                      ))}
                    </div>
                  </Col>
                </Row>
             </Panel>
        </Collapse>
     
    </div>
  );
}

export default Contract;
